import { ref, watch, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { useMenuStore } from '$aegisStore/menu'

export const useSchema = function() {
    const route = useRoute()
    const menuStore = useMenuStore()

    const api = ref('')
    const tableSchema = ref({})
    const tableConfig = ref()
    const searchSchema = ref({})
    const searchConfig = ref()
    const components = ref({})

    // 构造 schemaConfig 相关配置给 schemaView
    const buildData = function() {
        const { key, sider_key: siderKey } = route.query

        const mItem = menuStore.findMenuItem({
            key:'key',
            value: siderKey ?? key
        })

        if (mItem && mItem.schemaConfig) {
            const { schemaConfig } = mItem

            const configSchema = JSON.parse(JSON.stringify(schemaConfig.schema))

            api.value = schemaConfig.api ?? ''
            
            tableSchema.value = {}
            tableConfig.value = undefined
            searchSchema.value = {}
            searchConfig.value = undefined
            components.value = {}
            nextTick(() => {
                // console.log("tableSchema", schemaConfig.tableConfig);
                // 构造 tableSchema 和 tableConfig
                tableSchema.value = buildDtoSchema(configSchema, 'table');
                tableConfig.value = schemaConfig.tableConfig

                // 构造 searchSchema 和 searchConfig
                const dtoSearchSchema = searchSchema.value = buildDtoSchema(configSchema, "search");
                for (const key in dtoSearchSchema.properties) {
                    if (route.query[key] !== undefined) {
                        dtoSearchSchema.properties[key].option.default = route.query[key]
                    }
                }
                searchSchema.value = dtoSearchSchema;
                searchConfig.value = schemaConfig.searchConfig;

                // 构造 components = { comKey: { schema: {}, config: {} } }
                const { componentConfig } = schemaConfig; 
                
                if (componentConfig && Object.keys(componentConfig).length > 0) {
                    const dtoComponents = {}

                    for (const comName in componentConfig) { 
                        dtoComponents[comName] = {
                            schema: buildDtoSchema(configSchema, comName),
                            config: componentConfig[comName]
                        }
                    }
                    components.value = dtoComponents
                }
            })
        }
    }

    const buildDtoSchema = (_schema, comName) => {
        if (!_schema?.properties) return {}

        const dtoSchema = {
            type: 'object',
            properties: {}
        }

        for (const key in _schema.properties) {
            const props = _schema.properties[key]

            if (props[`${comName}Option`]) {
              let dtoProps = {};
              for (const pKey in props) {
                if (pKey.indexOf("Option") < 0) {
                  dtoProps[pKey] = props[pKey];
                }
              }

              dtoProps = Object.assign({}, dtoProps, { option: props[`${comName}Option`] });

              // 处理required字段
              const { required } = _schema;
              if (required && required.find((pk) => pk === key)) {
                dtoProps.option.required = true;
              }

              dtoSchema.properties[key] = dtoProps;
            }
        }
        return dtoSchema
    }

    watch([
        () => route.query.proj_key,
        () => route.query.key,
        () => menuStore.menuList
    ], () => {
        buildData()
    },{
        deep: true
    })

    onMounted(() => {
        buildData()
    })

    return {
        api,
        tableSchema,
        tableConfig,
        searchSchema,
        searchConfig,
        components
    };
}